<template>
	<view class="container">
		<view class="article" v-for="(item, i) in records" :key=i>
			<view class="top">
				<view class="user">
					<image :src="item.avatarUrl" mode="cover"></image>
					<text>{{ item.nickName }}</text>
				</view>
				<view class="tag">{{ item.subThemeName }}</view>
			</view>
			<view class="content">
				<view class="site">我在: {{ item.placeName }}</view>

				<uni-dateformat :date="JSON.parse(item.timeStamp)" format="MM月dd日 hh:mm"></uni-dateformat>
				<view class="desc">{{ item.actDescribe || '等你来聚!' }} </view>
			</view>
			<view class="footer">
				<view class="showDetail">查看详情</view>
				<view class="comment">留言</view>
				<view class="agree" @click="openDialog(item)">接收邀请</view>
			</view>
		</view>
		<view class="none">没有更多活动啦</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="success" cancelText="关闭" confirmText="同意" title="接收邀请" content="你确认要接收此项活动邀请吗?"
					@confirm="receiveDialogConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>

		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import { mapState } from "vuex"
export default {
	data() {
		return {
			total: 0,
			query: {
				communityId: 100,
				current: 1,
				limit: 5,
				themeId: ''
			},
			//活动记录列表
			records: [],
			//当前的活动信息
			currAct: {},
			//msg弹窗属性
			msgType: '',
			messageText: ''
		};
	},
	methods: {
		async getPageList(db) {
			try {
				const {
					data
				} = await uni.$http.post('/publish/findPageActivity/', this.query)
				console.log("文章数据信息", data);
				db && db()
				if (data.code == 200) {
					this.records.push(...data.pages.records)
					this.total = data.pages.total
				}
			} catch (error) {
				uni.$showMsg('刷新文章数据失败')
				console.log('获取活动列表失败', error);
			}
		},
		// 接收活动邀请
		openDialog(act) {
			this.$refs.alertDialog.open()
			this.currAct = act
		},
		// 接收用户邀请处理
		async receiveDialogConfirm() {
			let query = {
				actId: this.currAct.id,
				clickerId: this.userInfo.userId,
				userId: this.currAct.userId
			}
			for (let key in query)
				if (!query[key]) return
			const { data } = await uni.$http.post('/user/receive/', query)
			if (data.code == 200) {
				this.msgType = 'success'
				this.messageText = `接收活动邀请成功`
				this.$refs.message.open()
			}
			if (data.code == 201) {
				this.msgType = 'warn'
				this.messageText = `已经接收了此活动邀请`
				this.$refs.message.open()
			}
			if (data.code == 202) {
				this.msgType = 'warn'
				this.messageText = `不用参加自己发布的活动呢`
				this.$refs.message.open()
			}
		},
	},
	onLoad(props) {
		this.query.themeId = +props.themeId
		console.log('分页请求参数', this.query);
		this.getPageList()
	},
	// 下拉刷新下
	async onPullDownRefresh() {
		this.query.current = 1
		this.records = []
		this.getPageList(() => {
			uni.stopPullDownRefresh()
		})
	},
	// 触底加载更多
	async onReachBottom() {
		const MaxPage = Math.ceil(this.total / this.query.limit)
		if (++this.query.current > MaxPage) {
			return uni.$showMsg('没有更多活动啦')
		}
		this.getPageList()
	},
	computed: {
		...mapState('user', ['userInfo']),
	}
}
</script>

<style lang="less" scoped>
.container {
	padding-top: 10rpx;
	background-color: #ececec;
	min-height: 100vh;

	.none {
		line-height: 50rpx;
		text-align: center;
		font-size: 45rpx;
	}
}

.article {
	padding: 20rpx;
	margin: 10rpx 20rpx;
	font-size: 45rpx;
	border: 1px solid #ccc;
	box-sizing: border-box;
	border-radius: 10rpx;
	box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: white;
	position: relative;

	.top {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.user {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 55rpx;
			font-weight: 700;
			max-width: 500rpx;
			overflow: hidden;

			image {
				width: 100rpx;
				height: 100rpx;
				margin-right: 30rpx;
				border-radius: 10rpx;
			}
		}

		.tag {
			background-color: #3eb575;
			padding: 10rpx;
			color: white;
			border-radius: 10rpx;
			position: absolute;
			top: 0;
			right: 0;
		}
	}

	.content {
		font-size: 50rpx;
		line-height: 90rpx;
		text-align: center;

		.desc {
			font-size: 40rpx;
		}

		/deep/ text {
			color: red;
			font-weight: 600;
		}
	}

	.footer {
		border-top: 1px solid #ccc;
		padding-top: 20rpx;
		display: flex;
		justify-content: space-between;

		.comment,
		.showDetail,
		.agree {
			font-size: 40rpx;
			width: 200rpx;
			height: 100rpx;
			line-height: 100rpx;
			background-color: #005082;
			text-align: center;
			border-radius: 15rpx;
			color: white;
		}

		.comment {
			background-color: #FFA41B;
		}

		.agree {
			background-color: #3eb575;
		}
	}
}
</style>
